/*!*********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2019 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/



@import "standards";
@import "colors";
@import "fonts";

@include Montserrat;

h2 .x2-button {
    margin: 0 0 0 5px;
}

.page-title + form > .x2-layout {
    border-radius: 0;
}

#main-column {
    margin-top: 20px;
    > {
        div, form {
            margin: 0 0px 5px 0px;
        }
    }
}

.history {
    padding: 0 5px;
    &.x2-layout-island.sortable-widget-container {
        background: none !important;
    }
}

#main-column > div.page-title-fixed-outer {
    margin: 0 0 5px 0;
}

.x2-layout {
    width: auto;
    overflow: hidden;
    background: #fafafa;
    margin: 0px 20px 20px 0px;
    
    @include border-radius;

    a {
        text-decoration: none;
        &:hover {
            color: #3d70b4;
        }
    }

    .formSectionRow {
        /* @theme background: content */

        .formItem .label {
            /* @theme border-color: border */
        }
    }


    // Border stuff
    .formSectionRow .formSectionColumn .formItem .label{
        border-left: none;
        min-width: 70px;
    }

    .formSectionRow .formSectionColumn:first-child .formItem .label{
        border-left: none;
        min-width: 70px;
    }

    .formSectionRow .formItem:first-child .label {
        border-top: none;
        border-left: none;
        border-bottom: none;
    }
    
    .formSectionRow .formItem .label {
        border-top: none;
        border-left: none;
        border-bottom: none;
    }

    .formSectionRow .formItem:last-child .label {
        border-top: none;
        border-left: none;
        border-bottom: none;
    }

    .formSectionRow .formItem.topLabel .label {
        border-right: none;
    }

    .formSectionRow .formItem.topLabel:last-child .label {
        border-right: 1px solid $gray;
    }

    .formSection {
        margin-right: 0px !important;
        background: white; 
        border-top: 1px solid #e0e0e0;

        .formSectionShow, 
        .formSectionHide {
            display: inline-block;
            opacity: 0.6;
            height: 15px;
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 2px;
        }
        .formSectionShow {
            display: inline-block;
        }

        .formSectionHide {
            display: none;
        }
    
        &.showSection {
            .formSectionShow {
                display: none !important;
            }
            .formSectionHide {
                display: inline-block !important;
            }

        }

        .formSectionColumn {
            position: relative;
            border-collapse: collapse;
        }
    }

    .formSection:first-child {
        border-top: none;
    }
    
    .tableWrapper {
        width: auto;

        .table {
            display: table;
        }

        &.noTitle {
            border-top: none;
        }

        .grid-view table.items {
            clear: none;
            margin-top: 0;
            border: none;
        }
    }

    .formSectionHeader {
        background: white; 
	border-bottom: none;
        border-top: none;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        padding: 6px 12px 2px 12px;
        display: block;
        margin-right: 0px !important;

        /* @theme background: content */
        /* @theme color: text */
        /* @theme border-color: border */

        a {
            width: 20px;
            display: none;
            font-style: normal;
            text-decoration: none;
            text-align: center;
        }
    }

    .sectionTitle {
        display: inline-block;
        margin-left: 0px;
        padding-left: 0px;
        font-family: Montserrat;
        font-weight: normal !important;
    }

    &.form-view .formItem:nth-child(odd) {
        background: lighten($lightGray,10%);
        
        /* @theme background: content */
    }

    .formItem {
        word-break: break-word;
        /* set field width in this element */
        overflow: hidden;
        /* @theme background: content */

        &:nth-child(odd) {
            background: white;
            
            /* @theme background: content */
        }

        &:nth-child(even) {
            background: white;
            
            /* @theme background: content */
        }

        &.multiLine {
            overflow: hidden;
        }
        &.checkBox {
            width: auto;
        }

        .label {
            font-size: 75%;

            box-sizing: border-box;

            background: white;
            border: 1px solid $gray;

            /* @theme background: light_content */
            /* @theme color: text */
            /* @theme border-color: border */
            
            vertical-align: middle;
        }

        .attribute {
            position: relative;
            
            /* @theme color: text */
        }

        &.noLabel .label, 
        &.inlineLabel .label {
            opacity: 0;
        }

        &.topLabel {
            .attribute {
                background: white;

                /* @theme background: content */
            }
            .label {
                padding: 4px;
                border-bottom: 1px solid #ccc;
            }
        }

        &.leftLabel .label {
            box-sizing: border-box;
            
            padding: 3px;

            width: 70px;

            text-align: right;
        }

        &.multiLine.leftLabel label {
        }

        label.groupLabel {
            background: none;
            display: inline;
            margin-left: 5px;
        }

        input[type=text], 
        textarea {
            box-sizing: border-box;

            min-height: 22px;
            border: 1px solid $lightGray;

            font-size: 12px;
            @include border-radius(3px);
        }
    
        textarea {
            width: 100%;
            padding: 2px;
            min-height: 3em;

            /* @theme background: content */
            /* @theme color: text */
        }

        .field-checked {
            color: $highlightGreen;
        }

        .field-unchecked {
            color: $deleteRed;
        }
    }

    /* Form Sections */

    .collapsible .sectionTitle {
        padding-right: 0;
    }

    .formItem .placeholder {
        color: #aaa;
    }

    .extra-column {
        vertical-align: middle;

        .x2-hint {
            width: 15px;
            height: 15px;
            line-height: 15px;

            color: white;
            background: $darkBlue;

            border-radius: 3px;

            text-align: center;
            font-weight: bold;

            @include opacity-hover(0.8);

            &:before {
                font-family: Montserrat;
                content: "?";
            }

        }
    }

    .textarea .formInputBox {
        width: 90%;
    }

    .formInputBox {
        box-sizing: border-box;
        
        display: inline-block;
        min-width: 100px;
        padding: 3px;

        font-weight: bold;
        input {
            margin: 0;
            padding: 2px;
        }

        input.input-percentage {
            background: white url(../images/formEditor/percentage.gif) no-repeat 95%;
        }

        input, &.textBox {
            font-weight: normal;
        }

        .checkboxWrapper {
            display: inline-block;
            vertical-align: middle;
            height: 14px;
            padding: 4px 0 0 4px;
        }
    }
    
    .error {
        &div,
        &label,
        &span {
            color: #C00;
        }

        &input, 
        &textarea,
        &select {
            background: #FEE !important;
            border-color: #C00 !important;
        }
    }


    .errorSummary {
        background: #FEE;
        border: 2px solid #C00;
        font-size: 0.9em;
        padding: 5px;
        margin-bottom: 1px;

        p {
            margin: 0;
            padding: 5px;
        }
        ul {
            margin: 0;
            padding: 0 0 0 20px;
        }
    }

    .errorMessage {
        color: red;
        font-size: 0.9em;
    }

    .formSectionColumn {
        display: inline-table;

        border-collapse: collapse;

        margin: 0;
        padding: 0;

        vertical-align: top;
        &:last-child {
            border-right: none !important;
        }
    }


    &.form-view .formItem {
        border-width: 0 0 0;
    }

    input[type='checkbox'] {
        height: 11px;
    }

}

.x2-layout.editMode {
    @include standard-box-shadow;

    td {
        border: 1px dashed #f00;
        border-width: 1px 1px 1px 0;
    }

    .formSectionHeader {
        width: 100%;

        float: none;
        a {
            display: inline;
            float: right;
            width: auto;
            margin: 0 5px;
        }

        a.formSectionHide {
            display: none;
        }

        .formSectionShow, .formSectionHide {
            float: left;
        }
    }

    .showSection .formSectionHeader a.formSectionShow {
        display: none;
    }

    .showSection .sectionTitle {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .formTabOrder {
        display: none;
        top: 0;
        right: 0;
        position: absolute;
        z-index: 10;
        height: 15px;
        width: 24px;
        background: #990000;
        font-size: 11px;
        text-align: center;
        color: #fff;
        @include border-radius (0 1px 0 4px);
    }

    .formItem {
        margin: 0;
        padding: 0;


        &.selected {
            background: #90bede;
            label, input, textarea {
                border-color: #64879f;
                background: #90bede;
            }
        }

        &.ui-sortable-helper {
            margin-right: 0;
            padding-right: 5px;
            border: 1px solid #ccc;
            @include border-radius (4px);
        }

        &.topLabel label {
            padding: 2px;
            margin: 0;
            display: block;
        }

        &.inlineLabel label,
        &.noLabel label {
            display: none;
        }
    }

    .formItemPlaceholder {
        float: left;
        margin: 2px 3px;
        width: 3px;
        height: 24px;
        background: #66f0ff;
    }

    .formSectionPlaceholder {
        width: auto;
        height: 3px;
        background: #66f0ff;
    }

    .formSortable {
        min-height: 30px;
        width: 100%;
        overflow: auto;
        height: 100%;
    }

    .formInputBox {
        margin: 0;
        padding: 3px;
        margin-bottom: 0;
    }

    .formSectionRow td{
        box-sizing: border-box;
    }
}

.lt-ie9 div.x2-layout .showSection .sectionTitle {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

input[type="text"].record-name-autocomplete {
    -webkit-appearance: none;

    height: 22px;
    box-sizing: border-box;

    font-size: 12px;
    @include border-radius(3px);
}

/* Editor CSS Begins Here */

.lt-ie9 div.x2-layout.editMode .showSection .sectionTitle {
    filter: none;
}


#formEditorControls, #fieldListTitle, .fieldListTitle {
    font-size: 12px;
    display: block;
    padding: 5px 5px;
    // border-bottom: 1px solid #666;
    background: #eee;

    /* @theme background: highlight1 */
    @include border-radius(4px 4px 0 0);
}

#formEditorControls {
    /* display:none; */
    position: relative;
    z-index: 2;
    clip: rect(0px, 1000px, 1000px, 0px);
    margin-bottom: -1px;
    // @include box-shadow(0 0 10px 0 rgba(black, 0.75));
}

.x2-layout.editMode #formEditorControls {
    margin-bottom: 0;
}

#formEditorControls {
    a.x2-button {
        margin-bottom: 0;
    }
    .formItemOptions {
        float: right;
        margin: 0 5px 0 0;
        display: none;
        input {
            width: 13px;
            height: 13px;
            padding: 0;
            margin: 0 10px 0 3px;
            vertical-align: bottom;
            position: relative;
            top: -3px;
            *overflow: hidden;
        }
        select {
            font-size: 11px;
            margin: 0;
            padding: 0;
        }
    }
}

#fieldListBox {
    margin: 0 0 10px 0;
    float: right;
    clear: right;
    width: 200px;
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#editorFieldList {
    height: 400px;
    padding: 5px;
    overflow-y: scroll;
    .formItem {
        float: none;
        margin: 0 2px 2px 0;
        padding: 4px;
        border: 1px solid #ccc;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        background: #fafafa;
    }
    .formItemPlaceholder, .formInputBox {
        display: none;
    }
    label {
        color: #000;
        padding: 1px 5px 1px 20px;
        font-size: 12px;
        font-weight: normal;
        &.emailIcon {
            background: url(../images/formEditor/email_icon.gif) 2px 0px no-repeat transparent;
        }
    }
}

/* Individual form field box  */

ul.fieldlist li label.emailIcon {
    background: url(../images/formEditor/email_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.phoneIcon, ul.fieldlist li label.phoneIcon {
    background: url(../images/formEditor/phone_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.booleanIcon, ul.fieldlist li label.booleanIcon {
    background: url(../images/formEditor/boolean_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.dropdownIcon, ul.fieldlist li label.dropdownIcon {
    background: url(../images/formEditor/dropdown_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.dateIcon, ul.fieldlist li label.dateIcon {
    background: url(../images/formEditor/date_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.textIcon, ul.fieldlist li label.textIcon {
    background: url(../images/formEditor/text_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.varcharIcon, ul.fieldlist li label.varcharIcon {
    background: url(../images/formEditor/varchar_icon.gif) 2px 0px no-repeat transparent;
}

#editorFieldList label.percentageIcon, ul.fieldlist li label.percentageIcon {
    background: url(../images/formEditor/percentage_icon.gif) 2px 0px no-repeat transparent;
}

/* Tab Order Mode */

#formEditor.tabOrderMode .formTabOrder {
    display: block;
}

.quick-create-button {
    &:hover {
        color: #699c1c;
    }
    font-size: 24px;
    font-weight: bold;
    vertical-align: middle;
    color: #82C71A;
    display: inline-block;
    cursor: pointer;
}

/* Custom CSS for Jquery UI Autocomplete */

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Headers for sections within admin pages when the header is not a form input label: */

span.mock-x2-form-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
}

/* Cron-related form items: */

div.cron-job {
    label.cron-checkitem {
        display: inline-block;
        &.big {
            font-size: 1.3em;
        }
    }
    input.cron-enabled {
        display: inline-block;
    }
}

.x2-forms-error-msg {
    color: red;
}

/***********************************************************************
* publish half width style  
* Repeated 3 times:
*   -once for browsers which don't support media queries
*   -two more times for the cases where the right widgets are shown/hidden
***********************************************************************/

.history.half-width {
    width: 35%;
    margin-top: 5px;
}

div.half-width {
    //width: 65%;
    float: left;
}

.history.half-width {
    padding: 0;
    > {
        div, form {
            margin: 0 0px 5px 0;
        }
    }
}

#main-column.half-width > div.page-title-fixed-outer {
    padding-right: 10px;
}

/* .history.half-width > div, .history.half-width > form {padding-right:10px;margin-right:-10px;} */

div.half-width > div.page-title, #main-column > div.page-title {
    margin-left: 0;
}

div.half-width > div.form {
    background: #fff;
}

#main-column.half-width {
    div, form {
        margin: 0 5px 5px 0px;
    }
}

@media (min-width: 1403px) {
    #main-column {
        width: 65%;
        float: left;
    }
    .history {
        padding: 0;
        > {
            div, form {
                margin: 0 0px 5px 0;
            }
        }
    }
    #main-column {
        div {
            &.page-title-fixed-outer {
                padding-right: 10px;
            }
            &.page-title {
                margin-left: 0;
            }
            &.form {
                background: #fff;
            }
        }
    }
}

@media (min-width: 1122px) {
    .no-widgets {
        .history {
            margin-top: 5px;
        }
        #main-column {
            width: 65%;
            float: left;
        }
        .history {
            padding: 0;
            > {
                div, form {
                    margin: 0 0px 5px 0;
                }
            }
        }
        #main-column {
            div {
                &.page-title-fixed-outer {
                    padding-right: 10px;
                }
                &.page-title {
                    margin-left: 0;
                }
                &.form {
                    background: #fff;
                }
                margin: 0 0px 0px 0px;
            }
            form {
                margin: 0 5px 5px 0px;
            }
        }
    }
}

#upload_iframe {
    position: absolute;
}


div,label,span {
    &.x2-error {
            color: #C00;
    }
}

input, textarea, select {
    &.x2-error {
        background: #FEE !important;
        border-color: #C00 !important;
    }
}

